import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import Tablist from '../../components/Tablist/Tablist'
import { Button, Mask, Popup, Toast } from 'antd-mobile'
import { imgPre } from '../../request/http'
import './Detail.less'
import { reqCartAdd, reqGoodsInfo } from '../../request/api'

// 底部图片
import kefu from '../../assets/img/kefu.png'
import dianpu from '../../assets/img/dianpu.png'
import gwc from '../../assets/img/gwc.png'
import { Link } from 'react-router-dom'

export default class Detail extends Component {
  constructor() {
    super()
    // 1.初始化数据
    this.state = {
      goodsinfo: {},//单个商品信息
      visible: false,//弹窗是否显示
      num: 1//数量
    }
    this.arr = ['商品', '评价', '详情', '推荐']
    this.id = ''
    this.addgoods = {
      uid: '',
      type: '',
      goodsid: '',
      num: ''
    }
  }
  render() {
    // console.log(this.props)
    this.id = this.props.match.params.id;
    let { goodsinfo, visible, num } = this.state;
    // console.log(goodsinfo)
    return (
      <div className='detail'>
        <Header title="商品详情" back></Header>
        {/* 3.页面渲染 */}
        <Tablist arr={this.arr}></Tablist>
        <div className='content'>
          <img src={imgPre + goodsinfo.img} alt="" />
          <div className='text'>
            <span>{'￥' + goodsinfo.price}</span>
            <i>{'￥' + goodsinfo.market_price}</i>
            <p>{goodsinfo.goodsname}</p>
          </div>
        </div>
         {/* 弹窗部分 */}
            {/* 遮罩层 */}
            <Mask visible={visible} onMaskClick={() => this.setVisible()} />
            {/* 弹窗 */}
            <Popup
              visible={visible}
              onMaskClick={() => {
                this.setVisible()
              }}
              bodyStyle={{ height: '40vh' }}
            >
              <div className='nums'>
                购买数量：
                <span>
                  {/* {num} */}
                  <button onClick={() => this.sub()}>-</button>
                  <input type="text" value={num} onChange={() => { }} />
                  <button onClick={() => this.add()}>+</button>
                </span>
              </div>
              <div className='sure' onClick={() => this.sure()}>确定</div>
            </Popup>
        {/* 底部导航 */}
        <footer className='footer'>
          <ul className='icon'>
            <li>
              <img src={kefu} alt="" />
              <div>客服</div>
            </li>
            <li>
              <img src={dianpu} alt="" />
              <div>店铺</div></li>
            <li>
              <Link to="/index/shop">
              <img src={gwc} alt="" />
              <div>购物车</div>
              </Link>
            </li>
          </ul>
          <div className='btn'>
            <Button onClick={this.addCart}>加入购物车</Button>
            <Button>立即购买</Button>
          </div>
        </footer>
      </div>
    )
  }
  componentDidMount() {
    // 2.发请求
    reqGoodsInfo({ id: this.id }).then(res => {//商品详情
      this.setState({
        goodsinfo: res.data.list[0]
      })
    })
  }
  // 4.功能实现
  setVisible() {//弹窗
    this.setState({
      visible: false
    })
  }
  addCart = () => {//点击加购按钮
    // 显示弹窗
    this.setState({
      visible: true
    })
  }
  sure() {//确定加购按钮
    this.setState({
      visible: false
    })
    // 整理参数
    let { goodsinfo, num } = this.state;
    let uid = JSON.parse(sessionStorage.getItem('userinfo')).uid;
    this.addgoods.uid = uid;
    this.addgoods.goodsid = goodsinfo.id;
    this.addgoods.type = this.props.match.params.type;
    this.addgoods.num = num;
    console.log(this.addgoods,1111)
    // 发送请求
    reqCartAdd(this.addgoods).then(res => {
      if (res.data.code == 200) {
        Toast.show({
          content: '加入购物车成功'
        })
      } else {
        Toast.show({
          content: '加入购物车失败'
        })
      }
    })
  }
  sub() {//数量减少按钮
    if (this.state.num <= 1) {
      this.state.num = 1;
      Toast.show({
        content:"不能再少了哦~"
      })
      return;
    }
    this.setState({
      num: this.state.num - 1
    })
  }
  add() {//数量增加按钮
    this.setState({
      num: this.state.num + 1
    })
  }
}
